<template>
  <div>
     <el-button type="primary" style="margin: 20px;" @click="open">添加视频</el-button>
     <el-table :data="dirVideoList" border>
      <el-table-column label="视频名称" prop="Vname"></el-table-column>
      <el-table-column label="视频时长" prop="Vtime"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <div>
              <el-link type="primary" @click="toDelDirVideo(row._id)">删除</el-link>
          </div>
        </template>
     
      </el-table-column>
     </el-table>
     <!-- 添加视频弹出层 -->
      <el-dialog title="给目录添加视频" width="60%" :visible.sync="videoFlag">
        <div>
            <el-table border stripe :data="videoList">
              <el-table-column label="视频名称" prop="Vname"></el-table-column>
                <el-table-column prop="Vstate" label="绑定课程"></el-table-column>
                  <el-table-column prop="Vtime" label="视频时长"></el-table-column>
                    <el-table-column label="发布时间">
                      <template #default="{row}">
                        <div>
                           {{new Date(row.createAt).toLocaleString()}}
                        </div>
                      </template>
                    </el-table-column>
                  <el-table-column label="操作">
                    <template #default="{row}">
                      <div>
                        <el-button @click="toAddVideo(row._id)" type="primary">添加</el-button>
                      </div>
                    </template>
                  </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total">
              </el-pagination>
         </div>
         <template #footer>
          <div>
              <el-button type="primary">确定</el-button>
                <el-button type="danger" @click="videoFlag=false">取消</el-button>
          </div>
         </template>
      </el-dialog>
  </div>
</template>
<script>
import {getVideoListApi} from '@/api/video'
// 给目录添加视频接口
import {addDirVideoApi,getDirVideoListApi,delDirVideoApi} from '@/api/course'
export default {
  data(){
    return {
      videoFlag:false,
      pageStart:1,
      videoList:[],//视频列表
      total:0,
      _id:'',//目录id
      dirVideoList:[],//目录下的视频列表
    }
  },
  created(){
    this.getList();
    // 接受兄弟组件传来的目录id
    this.$bus.$on("sendDirId",(dirid)=>{
         this._id=dirid;
          this.getDirVList();
    })
  },
  methods:{
    // 获取目录下的视频列表
    getDirVList(){
        //  根据兄弟组件传来的目录id 获取目录下的视频列表
          getDirVideoListApi({
            CDid:this.$route.query._id, //课程_id
            _id:this._id//目录_id
          }).then(res=>{
            console.log(res,"目录下的视频列表")
            // 获取到的数据渲染表格
            this.dirVideoList=res.data.list;
          })
    },
    async toDelDirVideo(Vid){ //删除目录下的视频
        let res=await delDirVideoApi({
          CDid:this.$route.query._id,//课程_id
          _id:this._id,//目录_id
          Vid:Vid//视频_id
        })
        console.log(res,"删除目录下的视频接口")
        // 删除成功后 重新获取目录下的视频列表
        this.getDirVList();

    },
    async toAddVideo(Vid){ //给目录添加视频接口
        let res=await addDirVideoApi({
          cid:this.$route.query._id,//课程_id
          _id:this._id,//目录_id
          Vid:Vid//视频_id
        })
        if(res.success){
          this.$message.success("添加成功")
          // 添加成功后 即时返回添加的新视频
          this.dirVideoList=res.data.list;
        }else{
          this.$message.error(res.err)
        }
      
      
       console.log(res,"给目录添加视频接口")

    },
    open(){ //打开弹出层
      if(this._id){ //有目录id 在打开弹出层
         this.videoFlag=true;
      }else{
        this.$message.error("请先选择目录")
      }
     
    },
    async getList(){ //获取视频列表
        let res=await getVideoListApi({
          pageStart:this.pageStart
        })
        if(res.success){
            this.videoList=res.data.list;
           this.total=res.data.count;
        }
      

    }
  }
}
</script>